<template>
	<view class="content">
		
			<view v-if="info.feeType==='1'" class="money">
				<view class="">
					<text>欠费总额</text>
					<text>{{info.receivableAmount}}</text>
				</view>
				<view class="">
					<text>已缴金额</text>
					<text>{{info.payAmount}}</text>
				</view>
				<view class="">
					<text>待缴金额</text>
					<text style="color: #F16757;">{{info.receivableAmount-info.payAmount}}</text>
				</view>
			</view>
			<view class="postings basic">
				<view class="post_con">
					<text>企业名称</text>
					<text>{{info.enterpriseName}}</text>
				</view>
				<view class="post_con">
					<text>计算周期</text>
					<text>{{info.beginDate}}-{{info.deadline}}</text>
				</view>
				<view class="post_con">
					<text>{{tabIndex==1?'缴费':'欠费'}}金额（元）</text>
					<text>{{info.receivableAmount-info.payAmount}}</text>
				</view>
				<view class="post_con">
					<text>缴费截止日期</text>
					<text>{{info.deadline}}</text>
				</view>
				<view class="post_con">
					<text>缴费记录</text>
					<text style="color: #44D94B;" @click="viewMore">查看更多 ></text>
				</view>
			</view>
			<view class="" v-if="info.feeType==='1'">
				<view class="rental_title">
					租赁费用明细
				</view>
				<view class="postings facility">
					<view class="post_con">
						<text>面积（m²）</text>
						<text>{{info.totalArea}}</text>
					</view>
					<view class="post_con">
						<text>单价（元/m²×月）</text>
						<text>{{info.unitPrice}}</text>
					</view>
					<view class="post_con">
						<text>金额合计</text>
						<text>{{info.receivableAmount}}</text>
					</view>
				</view>
			</view>
			<view class="" v-if="info.feeType==='7'">
				<view class="rental_title">
					物业费明细
				</view>
				<view class="postings facility">
					<view class="post_con">
						<text>面积（m²）</text>
						<text>{{info.totalArea}}</text>
					</view>
					<view class="post_con">
						<text>单价（元/m²×月）</text>
						<text>{{info.unitPrice}}</text>
					</view>
					<view class="post_con">
						<text>金额合计</text>
						<text>{{info.receivableAmount}}</text>
					</view>
				</view>
			</view>
			<view class="" v-if="info.feeType==='7'">
				<view class="rental_title">
					设施使用费明细
				</view>
				<view class="postings facility">
					<view class="post_con">
						<text>面积（m²）</text>
						<text>{{info.totalArea}}</text>
					</view>
					<view class="post_con">
						<text>单价（月租金0.5‰）</text>
						<text>{{info.unitPrice}}</text>
					</view>
					<view class="post_con">
						<text>金额合计</text>
						<text>{{info.receivableAmount}}</text>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:7,
				tabIndex:0,
				info:{}
			};
		},
		onLoad(option) {
			this.tabIndex = option.tabIndex
			this.getInfo(option.id)
		},
		methods: {
			viewMore(title) {
				uni.navigateTo({
					url: './record?billId='+this.info.id
				})
			},
			getInfo(id){
				let that=this
				//联网加载数据
				this.apis.businessApi.feBill(id).then(res => {
					this.info=res.data
				}).catch(()=>{
					//联网失败的回调,隐藏下拉刷新的状态
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
$subheadColor:#111111;
$titleColor:#333333;
@mixin boldTitle {
	font-size: 28rpx;
	font-weight: 500;
	color: #666666;
}
@mixin  bordcon {
	font-size: 28rpx;
	color: #333333;
}
@mixin  padding {
			padding: 30rpx 0;
}
.content{
	padding: 20rpx;
	box-sizing: border-box;
	.money{
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		view{
			display: flex;
			flex-direction: column;
			padding: 30rpx 0 30rpx 34rpx;
			width: 31.3%;
			background: #FFFFFF;
			border-radius: 12rpx;
			text:first-child{
				font-size: 26rpx;
				color: #666666;
				line-height: 36rpx;
				margin-bottom: 8rpx;
			}
			text:last-child{
				font-size: 44rpx;
				font-weight: 500;
				color: $titleColor;
			}
					}
				}
				.rental_title{
						@include bordcon
						@include padding
						padding: 20rpx 32rpx;
				}
				.postings{
					display: flex;
					flex-direction: column;
					background: #FFFFFF;
					padding: 0 32rpx;
					margin-bottom: 20rpx;
		border-radius: 12rpx;
					box-sizing: border-box;
					.post_title{
						@include bordcon
						@include padding
						border-bottom: 1rpx solid #EEEEEE;
					}
					.post_con{
						display: flex;
						justify-content: space-between;
						@include padding
						text:nth-child(1){
							@include boldTitle
						}
						text:nth-child(2){
							@include bordcon
						}
						// 待租
						.rent{
							color: #F74D39 !important;
						}
						// 已租
						.occupancy{
							color: #44D94B !important;
						}
					}
				}
				.basic{
					.post_title{
						display: flex;
						justify-content: space-between;
						@include bordcon
						@include padding
						text:nth-child(2){
							@include boldTitle
						}
					}
					.post_con{
						display: flex;
						justify-content: space-between;
						border-bottom: 1rpx solid #EEEEEE;
						@include padding
						text:nth-child(1){
							@include boldTitle
						}
						text:nth-child(2){
							@include bordcon
						}
					}
					view:last-child{
						border-bottom: none;
					}
				}
				.facility{
					display: flex;
					justify-content: space-between;
					flex-direction: row-reverse;
					.post_con{
						display: flex;
						flex-direction: column;
						border-bottom: 1rpx solid #EEEEEE;
						text:nth-child(2){
							@include bordcon;
							margin-top: 20rpx;
							
						}
					}
					view:last-child{
						border-bottom: none;
					}
					
				}
			}
</style>
